$(document).ready(function () {
    "use strict";

    var opt2 = {
        controls: [{
            name: "usermodal",
            type: "modal",
            body: [
                {
                    type: "gridtable",
                    name: "modalgriduser"
                }
            ]
        },
            {
                type: "row",
                controls: [{
                    type: "header", title: "User Management", breadcrumb: "users",
                    toolbarbutton: [
                                { type: "btn", name: "btnCreate", text: "create", color: "blue", icon: "plus", onClick: create },
                                { type: "btn", name: "btnEdit", text: "Edit", color: "green", icon: "edit", onClick: edit },
                                { type: "btn", name: "btnDelete", text: "Delete", color: "red", icon: "times", onClick: deleted },
                                { type: "btn", name: "btnSave", text: "Save", color: "purple", icon: "save", cls: "hide", onClick: save },
                                { type: "btn", name: "btnCancel", text: "Cancel", color: "yellow", icon: "undo", cls: "hide", onClick: cancel }
                    ]
                }
                ]
            },
        {
            type: "row",
            controls: [
                {
                    type: "portlet", name: "pnlfilter", color: "green", title: "User List", icon: "home", hidetool: ["remove", "config"],
                    body: [
                        {
                            type: "gridtable",
                            name: "griduser"
                        }
                    ]

                }
            ]
        },
        {
            type: "row",
            controls: [
                {
                    type: "portlet", mustvalid:true, name: "pnlInput", color: "purple", title: "Create User", icon: "home", hidetool: ["remove", "config"], hidden: true,
                    body: [
                        {
                            type: "lefttab",
                            name: "usertab",
                            //active:2,
                            tabitem: [
                                { icon: "home", text: "account info" },
                                { icon: "user", text: "personal info" }
                            ],
                            tabcontent: [
                                {
                                    controls: [
                                            {
                                                type: "formgroup",
                                                controls: [
                                                       { name: "uname", type: "textbox", label: "User Name", clslabel: "col-md-3", cls: "col-md-5", placeholder: "employee name", required: true, minlength: 5 }
                                                ]
                                            },
                                            {
                                                type: "formgroup",
                                                controls: [
                                                       { name: "upassword", type: "textbox", label: "Password", clslabel: "col-md-3", cls: "col-md-5", placeholder: "employee name", required: true, ispassword: true }
                                                ]
                                            },
                                            {
                                                type: "formgroup",
                                                controls: [
                                                       { name: "confirmpass", type: "textbox", label: "Confirm Password", clslabel: "col-md-3", cls: "col-md-5", placeholder: "employee name", required: true, ispassword: true, equalTo: "upassword" }
                                                ]
                                            },
                                            {
                                                type: "formgroup",
                                                controls: [
                                                       { name: "email", type: "textbox", label: "Email", clslabel: "col-md-3", cls: "col-md-5", placeholder: "employee name", required: true, email: true }
                                                ]
                                            }

                                    ]
                                },
                                {
                                    controls: [
                                            {
                                                type: "formgroup",
                                                controls: [
                                                       { name: "firstname", type: "textbox", label: "First Name", clslabel: "col-md-3", cls: "col-md-5", placeholder: "First name", helptext: "this is helptext" }
                                                ]
                                            },
                                            {
                                                type: "formgroup",
                                                controls: [
                                                       { name: "midname", type: "textbox", label: "Mid Name", clslabel: "col-md-3", cls: "col-md-5", placeholder: "Mid name", helptext: "this is helptext" }
                                                ]
                                            },
                                            {
                                                type: "formgroup",
                                                controls: [
                                                       { name: "lastname", type: "textbox", label: "Last Name", clslabel: "col-md-3", cls: "col-md-5", placeholder: "Last name", helptext: "this is helptext" }
                                                ]
                                            },
                                            {
                                                type: "formgroup",
                                                controls: [
                                                       { name: "empid", type: "lookup", label: "NIK", clslabel: "col-md-3", cls: "col-md-5", placeholder: "NIK", helptext: "this is helptext", readonly: true, modal: "usermodal", btncolor: "red", btnicon: "search", callback: searchemployee }
                                                ]
                                            }

                                    ]
                                }
                            ]
                        }
                        //{
                        //    type: "h3",
                        //    text: "Provide your account details",
                        //    hr:true
                        //},
                        //{
                        //type: "formgroup",
                        //controls: [
                        //       { name: "uname", type: "textbox", label: "employee name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                        //       { name: "", type: "textbox", label: "employee name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                        //       { name: "upassword", type: "textbox", label: "first name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                        //       { name: "confirmpass", type: "textbox", label: "mid name", cls: "col-md-2", placeholder: "employee name", helptext: "this is helptext", required: true, readonly: true },
                        //]
                        //}
                    ]
                }]
        }
        ]
    }



    var widget = new PageEngine(opt2);

    widget.render(init);



    function searchemployee() {
        refreshsrcemployee();
    }


    function init() {
        refreshgrid();
    }

    function deleted() {
        var rslt = widget.submit(widget.getbaseurl() + 'scp/admin/user/delete', { cb: JSON.stringify(widget.getSelectedGridRow("griduser")) }, true);
        if (rslt.success) {
            widget.showmessage([{ msg: "data has been deleted", title: "Done", type: "success" }]);
        }
        refreshgrid();
    }
    function create() {
        $("#uname").removeAttr("readonly");
        widget.clearcontrol("#pnlInput");
        widget.showonlyportlet("pnlInput");
        widget.showbuttontoolbar("#btnSave,#btnCancel");
    }

    function edit() {

        var rows = $("#griduser").dataTable().fnGetNodes();
        var cb = $("#griduser input:checked");
        if (cb.length == 0) {
            widget.showmessage([{ type: "error", msg: "please select data first", title: "error edit" }]);
        }
        else if (cb.length > 1) {
            widget.showmessage([{ type: "error", msg: "multiple edit is not active yet", title: "error edit" }])
        }
        else {
            edituser(cb.val());
        }
    }

    function cancel() {
        widget.showonlyportlet("pnlfilter");
        widget.showbuttontoolbar("#btnCreate,#btnEdit,#btnDelete");
    }

    function save() {
        if (widget.isvalid() == false) {
            console.log('not valid');
        }
        else {
            var data = $("#pnlInput").serializeObject();
            var rslt = widget.submit(widget.getbaseurl() + 'scp/admin/user/save', data, true);
            if (rslt.success) {
                widget.showmessage([{ msg: "data saved successfully", title: "Done", type: "success" }]);
            }
            else {
                widget.showmessage([{ msg: "Save Failed", title: "Error", type: "error" }]);
            }
            widget.showonlyportlet('pnlfilter');
            widget.showbuttontoolbar("#btnCreate,#btnEdit,#btnDelete");
            refreshgrid();
        }
    }


    function edituser(uname) {
        widget.populatedata({
            url: "api/admin/apiuser/users/" + uname
        },"#pnlInput");

        widget.showonlyportlet("pnlInput");
        widget.showbuttontoolbar("#btnSave,#btnCancel");
        $("#uname").attr("readonly", "");
    }



    function refreshsrcemployee() {
        var data = $("#pnlfilter").serializeObject();
        widget.reloadgrid({
            url: "api/admin/grid/users",
            //checkbox: true,
            name: "modalgriduser",
            params: data,
            key: "uname",
            filter: true,
            columns: [
            { mData: "uname", sTitle: "RoleId " },
            { mData: "firstname", sTitle: "First Name" },
            { mData: "midname", sTitle: "Mid Name" },
            { mData: "lastname", sTitle: "Last Name" }
            ],
            rwdblclick: function (data) {
                $("#empid").val(data[0]);
                $("#btnClose_usermodal").click();
            }
        });
    }


    function refreshgrid() {
        var data = $("#pnlfilter").serializeObject();
        widget.reloadgrid({
            url: "api/admin/grid/users",
            name: "griduser",
            checkbox: true,
            params: data,
            filter: true,
            key: "uname",
            columns: [
                { mData: "uname", sTitle: "Username" },
                { mData: "firstname", sTitle: "First Name" },
                { mData: "midname", sTitle: "Mid Name" },
                { mData: "email", sTitle: "Email" },
                { mData: "lastname", sTitle: "Last Name" }
            ],
            rwdblclick: function (data) {
                console.log(data);
                //console.log($("#cb_" + data[1]).is(':checked') ? 'c' : 'b');
                //edituser($("#cb_" + data[1]).val());
                edituser(data[1]);
            }
        });

    }



});